<template>
  <div class="healthy">
    <div class="healthy-top">
      <span class="healthy-top_title">
        健康优选
        <p></p>
      </span>
    </div>
    <div class="healthy-swiper">
      <div class="swiper-container swiper2">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="hea in healthyList"
            :key="hea.id"
            @click="enterDetail(hea.id)"
          >
            <img v-lazy="hea.pic" alt />
            <span class="desc">{{ hea.name }}</span>
            <span class="price">{{ hea.minPrice | currency }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { currency } from "@/filters";

export default {
  data() {
    return {
      swiper: {}
    };
  },
  props: {
    healthyList: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.healthy = new Swiper(".swiper2", {
      slidesPerView: 3.5,
      observer: true,
    });
  },
  /*  watch: {
    swipers() {
      this.$nextTick(() => {
        this.healthy = new Swiper(".swiper2", {
          slidesPerView: 3.5,
          paginationClickable: true,
          observer: true,
          observeParents: true
        });
      });
    }
  }, */
  methods: {
    enterDetail(id) {
      this.$router.push({ path: `/detail/${id}` });
    }
  }
};
</script>

<style lang="less" scoped>
.healthy {
  &-top {
    padding: 0 15px;
    box-sizing: border-box;
    margin: 15px 0;

    &_title {
      padding: 0 8px;
      color: #333;
      font: 18px "微软雅黑";
      position: relative;
      z-index: 1;
      p {
        content: "";
        z-index: -1;
        position: absolute;
        width: 86px;
        height: 0.2962963rem;
        left: 0;
        bottom: 0;
        box-shadow: 0.05555556rem 0.09259259rem 0.16666667rem 0
          rgba(131, 241, 219, 0.59);
        background-image: linear-gradient(90deg, #4bfdf2 0, #4bff8f 100%),
          linear-gradient(#94ffc4, #94ffc4);
      }
    }
  }
  &-swiper {
    .swiper-wrapper {
      padding: 0 12px;
      .swiper-slide {
        height: 153px;
        overflow: hidden;
        img {
          width: 100px;
          height: 100px;
        }
        .desc {
          font: 12px "微软雅黑";
          color: #333;
          display: block;
          line-height: 14px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .price {
          color: #f30;
          font-size: 14px;
        }
      }
    }
  }
}
</style>